<script setup lang="ts">
import { ref, onMounted, createApp, toRaw } from 'vue'
import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import SceneView from "@arcgis/core/views/SceneView"
import WebTileLayer from "@arcgis/core/layers/WebTileLayer.js"

const KEY = '8d5abf3590c1ef5888d31b1ff89d079a'
const map = ref<HTMLDivElement | undefined>(undefined)
let myMap, view: any

// 天地图标注服务的链接
const layer1 = new WebTileLayer({
  urlTemplate: `http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${KEY}`
})



onMounted(() => {
  createMap()
})
function createMap() {
  // 创建地图
  myMap = new Map({
    basemap: 'satellite', // 底图： satellite 卫星图、 terrain 地形图、 streets 道路图、 dark-gray 深灰色图层
    // layers:           // 图层集合
    // ground: 'world-elevation'
  })

  // 创建视图
  // view = new MapView({
  //   map: myMap,
  //   container: map.value,
  //   zoom: 14, // 1-19
  //   center: [115.880617, 28.681476], // 地图的中心点，当前中心点是滕王阁
  // })

  // 添加图层
  myMap.layers.add(layer1)

  const view = new SceneView({
    map: myMap,
    container: map.value,
    zoom: 14,
    center: [115.880617, 28.681476],

    // viewingMode: 'global', // local
  })


  // 监听地图点击事件
  view.on('click', (e: any) => {
    const point = e.mapPoint
    console.log(e, 'click');
  })
}
</script>

<template>
  <div class="map" ref="map"></div>
</template>

<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>
